<template>
	<view class="wp">
		<nav-public :title="'【团购订单】详情'" :background="'#9532E4'" :color="'white'"></nav-public>
		<view class="padding30">
			<view class="status" v-if="info.order.status==1&&info.order.refundstate==0">
				<image src="/static/order/ddhx.png" mode="widthFix"></image>
				<text>等待核销</text>
			</view>
			<view class="status" v-if="info.order.status==3&&info.order.iscomment==1">
				<image src="/static/order/xfcg.png" mode="widthFix"></image>
				<text>消费成功</text>
			</view>
			<view class="status" v-if="info.order.status==3&&info.order.iscomment==0">
				<image src="/static/order/ddpj.png" mode="widthFix"></image>
				<text>等待评价</text>
			</view>
			<view class="status" v-if="info.order.status==0">
				<image src="/static/order/ddfk.png" mode="widthFix"></image>
				<text>等待付款</text>
			</view>
			<view class="status" v-if="info.order.status==1&&info.order.refundstate==1">
				<image src="/static/order/ddtk.png" mode="widthFix"></image>
				<text>等待退款</text>
				<view class="refund">退款申请处理中，请耐心等待<text @click="$navTo('/pages/order/refundDetailw?id='+id)">查看进度></text></view>
			</view>
			<view class="status" v-if="info.order.status==-1">
				<image src="/static/order/ddtk.png" mode="widthFix"></image>
				<text>退款成功</text>
				<view class="refund">退款已返回至原支付方<text @click="$navTo('/pages/order/refundDetailw?id='+id)">查看详情></text></view>
			</view>
			<view class="shopinfo">
				<view class="s_zt" v-if="info.order.storeid!=0">
					<uni-icons type="shop" size="20"></uni-icons>
					<text>{{info.order.pickupname}}</text>
					<view class="zt_tag">需您自提</view>
				</view>
				<view class="top">
					<view>营业时间</view>
					<view>{{info.order.saletime}}</view>
				</view>
				<view class="bottom">
					<view class="address clamp">{{info.order.address}}</view>
					<view class="flex">
						<view>{{info.order.principalname}} {{info.order.mobile}}</view>
						<view class="imgs">
							<image src="/static/order/dianhua.png" mode="widthFix" @click="phoneCall(info.order.mobile)"></image>
							<image src="/static/order/address.png" mode="widthFix" @click="openMap"></image>
						</view>
					</view>
				</view>
			</view>
			<view class="reservationCon" v-if="info.order.status==1&&info.order.refundstate==0&&isopen.isopen==1">
				<view class="re_top">
					<view class="re_left">
						<view class="re_tit">电话预约后，方可到店使用</view>
						<view class="re_tip"><image src="/static/order/xshx.png" mode="widthFix"></image>{{isopen.msg}} <text v-if="reservationInfoAl.checkmemo">原因：{{reservationInfoAl.checkmemo}}</text></view>
					</view>
					<view class="reservation" @click="reservation" v-if="isopen.isopen==1">线上预约核销</view>
					<view class="reservation" v-if="isopen.isopen==2">{{reservationInfoAl.statusstr}}</view>
				</view>
				<view class="reservation_info">点击【线上预约核销】后，商家即可完成核销，建议您与商家沟通预约细节后，后再点击该按钮</view>
			</view>
			<view class="info">
				<view class="shopname" @click="$navTo('/pages/shoplist/shopgoods?id='+info.order.uid)"><text v-if="info.order.storeid!=0" class="s_tag">供货商</text>{{info.order.supname}} ></view>
				<view class="flex" v-for="item in info.orderGoods" :key="item.id">
					<image :src="item.thumb"></image>
					<view class="content">
						<view>{{item.goodstitle}}</view>
						<view class="small">单价：{{item.realprice}}</view>
						<view class="small">数量：{{item.total}}</view>
					</view>
					<view class="price"><text class="small">￥</text>{{info.order.price}}</view>
				</view>
				<view class="hexiao" v-if="info.order.status==1&&info.order.refundstate==0&&isopen.isopen!=2">
					<image @longtap="saveImage" :src="info.img" mode="widthFix"></image>
					<view>出示券码，收银员需确认核销</view>
				</view>
				<view class="allhexiao" v-if="info.order.status==3">
					<view>券码信息</view>
					<view class="small">已使用</view>
				</view>
				<!-- <view class="allhexiao" v-if="info.order.status==3">
					<view>核销门店</view>
					<view class="small">集团门店11111</view>
				</view> -->
				<view class="r_info r_flex" v-if="info.order.status==1&&isopen.isopen==2">
					<view class="r_item">
						<view class="r_tit">预约信息</view>
					</view>
					<view class="r_item">
						<view class="r_tit">联系人：</view>
						<view class="r_al_info">{{reservationInfoAl.realname}}</view>
					</view>
					<view class="r_item">
						<view class="r_tit">联系电话：</view>
						<view class="r_al_info">{{reservationInfoAl.mobile}}</view>
					</view>
					<view class="r_item" v-if="reservationInfoAl.yyuid!=0">
						<view class="r_tit">预约门店：</view>
						<view class="r_al_info">{{reservationInfoAl.supname}}</view>
					</view>
					<view class="r_item">
						<view class="r_tit">预约时间：</view>
						<view class="r_al_info">{{reservationInfoAl.yytime}}</view>
					</view>
					<view class="r_item">
						<view class="r_tit">备注信息：</view>
						<view class="r_al_info">{{reservationInfoAl.content}}</view>
					</view>
					<view class="r_item">
						<view class="r_tit">申请状态：</view>
						<view class="r_al_info">{{reservationInfoAl.statusstr}}</view>
					</view>
				</view>
			</view>
			<view class="stores" v-if="storeList&&storeList.length>0&&info.order.status==1">
				<view class="s_tit">
					<view>适用门店（{{storeNum}}家）</view>
				</view>
				<view class="s_alls" :class="{'heightauto':isShowAll==1}">
					<view class="s_a_item" v-for="item in storeList" @click="$navTo('/pages/shoplist/shopgoods?id='+item.uid)">
						<image :src="item.logo" class="s_a_logo"></image>
						<view class="s_a_left">
							<view class="clamp">{{item.supname}}</view>
							<view class="s_a_info">
								<text class="s_a_dis">距离{{item.distance}}</text>
								<text>{{item.shortaddress}}</text>
								<!-- <text>￥{{item.avgsale}}/人</text> -->
							</view>
							<view class="s_a_time">营业时间 {{item.saletime}}</view>
						</view>
						<view class="s_a_right">
							<view class="s_a_r_it" @click.stop="openMaps(item)">
								<image src="/static/addre.png"></image>
								<view>导航</view>
							</view>
							<view class="s_a_r_it" style="margin-left: 20rpx" @click.stop="phoneCall(item.principalmobile)">
								<image src="/static/dianhua.png"></image>
								<view>联系商家</view>
							</view>
						</view>
					</view>
				</view>
				<view class="s_look_all" v-if="isShowAll==0" @click="openALL(1)">查看全部门店<image src="/static/jiantou1.png"></image></view>
				<view class="s_look_all s_look_close" v-else @click="openALL(0)">收起<image src="/static/jiantou1.png"></image></view>
			</view>
			<view class="detail">
				<view class="item">
					<view class="left">订单编号</view>
					<view class="flex">
						<text>{{info.order.ordersn}}</text>
						<image src="/static/order/copy.png" mode="widthFix" @click="copyTap(info.order.ordersn)"></image>
					</view>
				</view>
				<view class="item">
					<view class="left">总金额</view>
					<view>￥{{info.order.price}}</view>
				</view>
				<block v-if="info.order.status==-1">
					<view class="item">
						<view class="left">现金退回：</view>
						<view>￥{{info.order.money}}</view>
					</view>
					<view class="item">
						<view class="left">米币退回：</view>
						<view>{{info.order.micredit}}</view>
					</view>
				</block>
				<block v-else>
					<view class="item">
						<view class="left">现金支付：</view>
						<view>￥{{info.order.money}}</view>
					</view>
					<view class="item">
						<view class="left">米币支付：</view>
						<view>{{info.order.micredit}}</view>
					</view>
				</block>
				<view class="item">
					<view class="left">备注信息：</view>
					<view>{{info.order.remark}}</view>
				</view>
				<view class="item">
					<view class="left">创建时间</view>
					<view>{{info.order.createtime}}</view>
				</view>
				<view class="item" v-if="info.order.storeid == 0">
					<view class="left">有效期(到期自动退)</view>
					<view>{{info.order.validtime}}</view>
				</view>
				<view class="item" v-if="info.order.status==3">
					<view class="left">核销时间</view>
					<view>{{info.order.finishtime}}</view>
				</view>
			</view>
			<view class="buttons">
				<button size="mini" v-if="info.order.status==1&&info.order.canrefund==1&&!info.orderGoods[0].goodstitle.includes('VIP礼包')" @click="tiao">申请退款</button>
				<button class="text_color" size="mini" @click="cancelOrder(info.order.id)" v-if="info.order.status==0">取消订单</button>
				<button size="mini" v-if="info.order.status==1&&info.order.refundstate==1" @click="tiao">{{info.order.refund_button}}</button>
				<button class="text_color" size="mini" @click="$navTo('/pages/product/groupbuy?id='+info.orderGoods[0].goodsid)" v-if="info.order.status==3||info.order.status==-1">再来一单</button>
				<button class="bg" size="mini" @click="$navTo('/pages/order/evaluate?id='+info.order.id)" v-if="info.order.status==3&&info.order.iscomment==0">去评价</button>
				<button class="bg" size="mini" v-if="info.order.status==0" @click="$navTo('/pages/money/pay?orderid=' + info.order.id)">继续付款</button>
			</view>
			
		</view>
		<uni-popup ref="popup" type="dialog">
			<view class="r_info">
				<view class="r_item">
					<view class="r_tit">联系人<text class="red">*</text></view>
					<input type="text" v-model="reservationInfo.realname" placeholder="请填写联系人">
				</view>
				<view class="r_item">
					<view class="r_tit">联系电话<text class="red">*</text></view>
					<input type="text" v-model="reservationInfo.mobile" placeholder="请填写联系电话">
				</view>
				<view class="r_item">
					<view class="r_tit">预约时间</view>
					<uni-datetime-picker v-model="reservationInfo.yytime" class="r_date" type="datetime" @change="changeTime" />
				</view>
				<view class="r_item">
					<view class="r_tit">备注信息</view>
					<textarea v-model="reservationInfo.content" placeholder="请填写备注"></textarea>
				</view>
				<view class="r_btn" @click="reservationSubmit">提交预约</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				status: '',
				info: {
					img: '',
					order: {
						createtime: "",
						id: "",
						ordersn: "",
						price: "",
						status: "",
						statusstr: "",
						finishtime: '',
					},
					orderGoods: [],
				},
				reservationInfo: {
					mobile: '',
					realname: '',
					yytime: '',
					content: ''
				},
				reservationInfoAl: [],
				isopen: [],//是否开启预约  不显示预约按钮 =1显示预约 =2已预约
				isShowAll: 0,
				storeList: [],
				storeNum: 0,
			}
		},
		onLoad(option) {
			this.id = option.id;
			this.getInfo();
			this.getShowReservation();
		},
		onShow(){
			this.getInfo();
		},
		methods: {
			// 门店列表
			getStoreList(){
				this.$axios('groupgoods/groupGoodsSupList','POST','shop',{
					id: this.info.orderGoods[0].goodsid
				}).then(res=>{
					if(res.data.code == 200){
						this.storeList = res.data.data.list;
						this.storeNum = res.data.data.num;
					}
				})
			},
			openALL(status){
				this.isShowAll = status;
			},
			//是否开启预约  
			getShowReservation(){
				this.$axios('detail/reservationOrder', 'POST', 'order', {
					orderid: this.id
				}).then(res => {
					if (res.data.code == 200) {
						this.isopen = res.data.data;
						// this.reservationLook();
						if(this.isopen.isopen>0){
							this.reservationLook();
						}
					}
				})
			},
			reservation(){
				this.$refs.popup.open()
			},
			changeTime(e){
				// this.reservationInfo.yytime = e;
			},
			reservationSubmit(){
				if(this.reservationInfo.realname == '') return this.$api.msg('请填写联系人');
				if(this.reservationInfo.mobile == '') return this.$api.msg('请填写联系电话');
				let obj = {
					id: this.id,
					mobile:this.reservationInfo.mobile,
					realname: this.reservationInfo.realname,
					yytime: this.reservationInfo.yytime,
					content: this.reservationInfo.content,
					uid: this.info.order.uid
				}
				// console.log(obj)
				// return;
				this.$axios('reservation/apply', 'POST', 'order', obj).then(res => {
					if (res.data.code == 200) {
						this.$api.msg(res.data.data);
						this.$refs.popup.close();
						this.isopen.isopen = 2;
						this.reservationLook();
					}
				})
			},
			reservationLook(){
				this.$axios('reservation/info', 'POST', 'order', {
					id: this.id
				}).then(res => {
					if (res.data.code == 200) {
						this.reservationInfoAl = res.data.data;
					}
				})
			},
			cancelOrder(v) {
				this.$axios('Op/cancel', 'POST', 'order', {
					orderid: v
				}).then(res => {
					if (res.data.code == 200) {
						this.$api.msg('已取消订单！');
						setTimeout(()=>{
							uni.navigateBack();
						},1000)
					}
				})
			},
			saveImage() {
				var that = this;
				uni.showModal({
					title: '保存',
					content: '保存核销码？',
					success: e => {
						if (e['confirm']) {
							uni.downloadFile({
								url: that.info.img,
								success: function(url) {
									uni.saveImageToPhotosAlbum({
										filePath: url.tempFilePath,
										success: function(e) {
											uni.showToast({
												title: '保存成功',
												icon: 'none',
												duration: 2200
											});
										},
									});
								}
							});
						}
					}
				});
			},
			getInfo() {
				this.$axios('detail/getOrderInfo', "POST", 'order', {
					id: this.id
				}).then(res => {
					if (res.data.code == 200) {
						this.info = res.data.data;
						this.getStoreList();
					}
				})
			},
			dhTap() {
				this.$axios('order/dh', "POST", 'supplier', {
					id: this.id
				}).then(res => {
					if (res.data.code == 200) {
						this.$api.msg('核销成功!');
						setTimeout(() => {
							this.$navRed('../order/detailsw?id=' + this.id + '&status=1')
						}, 1000)
					}
				})
			},
			tiao() {
				var _this = this;
				// if (this.info.order.refundtype == 0) {
					uni.navigateTo({
						url: "/pages/order/Customer?id=" + _this.id
					})
				// }
				//  else {
				// 	uni.navigateTo({
				// 		url: "/pages/order/AfterSales?id=" + _this.id
				// 	})
				// }
			},
			phoneCall(v) {
				let that = this;
				uni.makePhoneCall({
					phoneNumber: v, //仅为示例
					fail(e) {
						that.$api.msg(e);
					}
				});
			},
			openMap(){
				let that = this;
				uni.openLocation({
					latitude: parseFloat(that.info.order.lat),
					longitude: parseFloat(that.info.order.lng),
					scale: 15,
					name: that.info.supname,
					address: that.info.address,
				});
			},
			openMaps(v){
				uni.openLocation({
					latitude: parseFloat(v.y),
					longitude: parseFloat(v.x),
					scale: 15,
					name: v.title,
					address: v.address,
				});
			},
			kefu() {
				let that = this;
				wx.openCustomerServiceChat({
					extInfo: {
						url: 'https://work.weixin.qq.com/kfid/kfc85558bf452926a1b',
					},
					corpId: 'ww818270697fafba52',
					fail(res) {
						that.$api.msg('打开失败请重试！');
					}
				})
			},
			copyTap(v) {
				uni.setClipboardData({
					data: v
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background: #FBF8FE;
	}
	.wp {
		// padding: 0 30rpx;
		padding-bottom: 140upx;
		background: #FBF8FE;
	}
	
	.status {
		font-size: 40rpx;
		color: #9532E4;
		display: flex;
		align-items: center;
		padding: 40rpx 0;
		font-weight: 600;
		flex-wrap: wrap;
		image{
			width: 36rpx;
			margin-right: 10rpx;
		}
		.refund{
			width: 100%;
			color: #999999;
			font-size: 24rpx;
			font-weight: 400;
			margin-top: 18rpx;
			text{
				color: #9532E4;
				margin-left: 20rpx;
			}
		}
	}
	.shopinfo{
		background: #FFFFFF;
		border-radius: 12rpx;
		.s_zt{
			display: flex;
			padding: 20rpx;
			margin-bottom: -34rpx;
			align-items: center;
			text{
				margin: 0 4rpx;
				font-weight: 600;
			}
			.zt_tag{
				background: linear-gradient( 270deg, #8816E1 0%, #B92DF1 100%);
				color: #FFFFFF;
				font-size: 20rpx;
				border-radius: 8rpx;
				padding: 0 10rpx;
				line-height: 36rpx;
				margin-left: 6rpx;
			}
		}
		.top{
			display: flex;
			justify-content: space-between;
			border-bottom: 2rpx solid #F8F8F8;
			padding: 20rpx;
			font-size: 28rpx;
			color: #333333;
		}
		.bottom{
			padding: 10rpx 20rpx 24rpx;
			.address{
				font-size: 28rpx;
				color: #333333;
			}
			.flex{
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 24rpx;
				color: #999999;
				margin-top: 10rpx;
				.imgs{
					display: flex;
					align-items: center;
					image{
						width: 38rpx;
						margin-left: 40rpx;
					}
				}
			}
		}
	}
	.reservationCon{
		background: #FFFFFF;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-top: 20rpx;
		.re_top{
			display: flex;
			align-items: center;
			justify-content: space-between;
			.re_tit{
				font-weight: 600;
			}
			.re_tip{
				display: flex;
				align-items: center;
				font-size: 24rpx;
				color: #999999;
				margin-top: 10rpx;
				image{
					width: 22rpx;
					margin-right: 8rpx;
				}
			}
			.reservation{
				height: 52rpx;
				background: linear-gradient( 90deg, #A350E8 0%, #4E07A9 100%);
				border-radius: 8rpx;
				color: #FFFFFF;
				line-height: 52rpx;
				text-align: center;
				font-weight: 400;
				font-size: 24rpx;
				padding: 0 14rpx;
			}
		}
		.reservation_info{
			color: #999999;
			font-size: 24rpx;
			font-weight: 400;
			margin-top: 10rpx;
		}
	}
	.info{
		margin: 20rpx 0;
		background: #fff;
		padding: 20rpx;
		font-size: 28rpx;
		color: #333333;
		border-radius: 12rpx;
		.shopname{
			line-height: 50rpx;
			font-weight: 600;
			display: flex;
			align-items: center;
			.s_tag{
				display: inline-block;
				background: #000;
				color: #F3DD91;
				border-radius: 8rpx;
				padding: 0 6rpx;
				font-size: 20rpx;
				font-weight: normal;
				margin-right: 10rpx;
				line-height: 36rpx;
			}
		}
		.flex{
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1rpx solid #E9E9E9;
			padding-bottom: 20rpx;
			margin-top: 6rpx;
			image{
				width: 116rpx;
				height: 116rpx;
				border-radius: 14rpx;
			}
			.content{
				font-size: 24rpx;
				padding-left: 16rpx;
				flex: 1;
				color: #333333;
				.small{
					font-size: 20rpx;
					color: #999999;
					margin-top: 6rpx;
				}
			}
			.price{
				color: #AF141D;
				font-size: 36rpx;
				font-weight: 600;
				.small{
					font-size: 24rpx;
				}
			}
		}
		.hexiao{
			padding-top: 20rpx;
			text-align: center;
			font-size: 28rpx;
			color: #333333;
			font-weight: 600;
			image{
				width: 230rpx;
			}
		}
		.allhexiao{
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28rpx;
			color: #333333;
			margin-top: 20rpx;
			font-weight: 600;
			.small{
				font-size: 24rpx;
				color: #999999;
				font-weight: 400;
			}
		}
	}
	.stores{
		background: #fff;
		border-radius: 12rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		.s_tit{
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 32rpx;
			font-weight: 600;
			image{
				width: 22rpx;
				height: 22rpx;
			}
		}
		.s_alls{
			height: 140rpx;
			overflow: hidden;
			transform: all 0.2s;
			.s_a_item{
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-size: 22rpx;
				color: #999999;
				margin-top: 20rpx;
				height: 120rpx;
				.s_a_logo{
					width: 116rpx;
					height: 116rpx;
					border-radius: 12rpx;
					margin-right: 14rpx;
				}
				.s_a_left{
					flex: 1;
					line-height: 38rpx;
					.clamp{
						font-weight: 600;
						color: #333333;
						font-size: 30rpx;
					}
					.s_a_info{
						display: flex;
						
						.s_a_dis{
							color: #333333;
						}
						text{
							margin-right: 10rpx;
						}
					}
				}
				.s_a_right{
					display: flex;
					text-align: center;
					.s_a_r_it{
						// margin-left: 40rpx;
						image{
							width: 40rpx;
							height: 40rpx;
							margin-bottom: 10rpx
						}
					}
				}
			}
		}
		.heightauto{
			height: auto;
		}
		.s_look_all{
			font-size: 24rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			image{
				width: 24rpx;
				height: 24rpx;
				transform: rotateZ(90deg);
				margin-left: 10rpx;
			}
		}
		.s_look_close{
			image{
				transform: rotateZ(270deg);
			}
		}
	}
	.detail{
		background: #FFFFFF;
		border-radius: 12rpx;
		padding: 20rpx;
		.item{
			display: flex;
			justify-content: space-between;
			font-size: 24rpx;
			color: #333333;
			line-height: 2.8;
			align-items: center;
			.left{
				font-size: 28rpx;
				font-weight: 600;
			}
			.flex{
				display: flex;
				align-items: center;
				image{
					width: 28rpx;
					margin-left: 14rpx;
				}
			}
		}
	}
	.buttons {
		background: #fff;
		display: flex;
		height: 110upx;
		position: fixed;
		left: 0;
		bottom: 0;
		justify-content: flex-end;
		align-items: center;
		width: 100%;
		z-index: 99;
		text-align: center;
		padding: 0 22rpx;
		button {
			height: 52rpx;
			padding: 0 30rpx;
			margin: 0 8rpx;
			letter-spacing: 1px;
			border-radius: 26rpx;
			border: 2rpx solid #8615E1;
			color: #8615E1;
			line-height: 52rpx;
			white-space: nowrap;
			background: #fff;
		}
		.bg{
			background: linear-gradient( 90deg, #A350E8 0%, #4E07A9 100%);
			color: #fff;
		}
	}
	.r_info{
		background: #f8f8f8;
	    border-radius: 12rpx;
	    padding: 20rpx;	
		.r_item{
			margin-bottom: 16rpx;
			.red{
				color: red;
			}
			input{
				background: #fff;
				height: 60rpx;
				line-height: 60rpx;
				border: 1rpx solid #99999938;
				border-radius: 12rpx;
				padding: 0 20rpx;
			}
			.r_tit{
				margin-bottom: 10rpx;
			}
			textarea{
				background: #fff;
				border-radius: 12rpx;
				padding: 20rpx;
				border: 1rpx solid #99999938;
				height: 200rpx;
			}
			.r_al_info{
				color: #999;
				width: 450rpx;
			}
		}
		.r_btn{
			width: 248rpx;
			height: 70rpx;
			background: linear-gradient( 90deg, #A350E8 0%, #4E07A9 100%);
			border-radius: 18rpx;
			color: #FFFFFF;
			line-height:70rpx;
			text-align: center;
			margin: 20rpx auto;
		}
	}
	.r_flex{
		.r_item{
			display: flex;
			.r_tit{
				margin-right: 8rpx;
			}
		}
	}
</style>